<template>
  <div id="box">
    <search-bar></search-bar>
    <div class="main">
      <left-bar></left-bar>
      <div class="content" >
        <ul class="topNav" :class="{showBar:show}">
          <li @click="toLink('/home/gx')" :class="{ active: isActive('/gx') }">
            个性推荐
          </li>
          <li @click="toLink('/home/zs')" :class="{ active: isActive('/zs') }">
            专属定制
          </li>
          <li @click="toLink('/home/gd')" :class="{ active: isActive('/gd') }">
            歌单
          </li>
          <li
            @click="toLink('/home/phb')"
            :class="{ active: isActive('/phb') }"
          >
            排行版
          </li>
          <li @click="toLink('/home/gs')" :class="{ active: isActive('/gs') }">
            歌手
          </li>
          <li @click="toLink('/home/zx')" :class="{ active: isActive('/zx') }">
            最新音乐
          </li>
        </ul>
        <div class="place"></div>
        <router-view @getId='getUrl'></router-view>
      </div>
    </div>
    <play-bar :murl="musicUrl" :mpic="mpic" :mname='mname' :author='author'></play-bar>
  </div>
</template>

<script>
import LeftBar from "../components/common/leftBar.vue";
import PlayBar from "../components/common/playBar.vue";
import searchBar from "../components/common/searchBar.vue";

export default {
  data() {
    return {
      show:false,
      musicUrl:'',
      mpic:'',
      mname:'',
      author:''
    };
  },
  methods: {
    toLink(path) {
      this.$router.push(path);
    },
    getUrl(){
     this.$request({
       url:'/song/url',
       params:{
         id:this.$store.state.mid
       }
     }).then(success=>{
       this.musicUrl=success.data.data[0].url
     })
     this.$request({
       url:'/song/detail',
       params:{
         ids:this.$store.state.mid
       }
     }).then(success=>{
       this.mpic=success.data.songs[0].al.picUrl
       this.author=success.data.songs[0].ar[0].name
       this.mname=success.data.songs[0].name
     })
    }
   
  },
  computed: {
    isActive() {
      return function (path) {
        return this.$route.path.includes(path);
      };
    },
  },
  components: { searchBar, LeftBar, PlayBar },
  mounted() {
  this.$root.eventhub.$on('play',()=>{
    this.getUrl()
  })
  },
};
</script>

<style scoped>
.place {
  margin-bottom: 80px;
}
#box {
  margin: 0 auto;
  width: 1200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.main {
  display: flex;
}
.content {
  flex: 1;
  padding: 0 20px;
  height: 1010px;
  overflow: auto;
}
.topNav {
  position: fixed;
  z-index: 99;
  display: flex;
  height: 60px;
  line-height: 60px;
  width:960px;
  background-color: #ffff;
}
.topNav li {
  font-size: 20px;
  margin-right: 20px;
  cursor: pointer;
}
.active {
  font-weight: bold;
  border-bottom: 4px solid #ec4141;
}



.content::-webkit-scrollbar {/*滚动条整体样式*/
    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.content::-webkit-scrollbar-thumb{/*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(245, 243, 243, 0.1);
    background: #9e9e9e;
}

.content::-webkit-scrollbar-track{/*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(192, 187, 187, 0.1);
    border-radius: 10px;
    background: #EDEDED;
}
.showBar{
  display: none;
}
</style>